﻿/*********************Layout***************/

#container
{
    width:inherit;
    height:900px;           
}

/*左侧导航Layout*/
#sideBar
{
    width:360px;
    margin-top:25px;
    height:inherit;
    float:left;             
}

#pageBody
{
    width:inherit;
    height:860px;
    margin-top:0px;
}

/**/
#mainBody
{
    width:1080px;
    height:inherit; 
    float:left;
    margin-left:20px;    
}


/***************Sub Element Layout************************/

#mainBody table
{
    margin-top:40px;
    margin-left:140px;       
}

#mainBody table tr
{
    height:300px;   
}

#mainBody table td
{
    width:860px;         
}


/****************TabPage***************/
*
{
    margin:0;
    padding:0;
    list-style-type:none;    
}

a,img
{
    border:0;
}

body
{
    /*
        width:960px; 这是目前主流网页的宽度，当然你也可以改成你自己感觉合适的，但是此宽度必须有。 
        text-align:left; 是为了还原html 中居中的文字。 
    */
    width:1500px; 
    margin:0 auto;
    text-align:left;   
    height:100%;
    font:normal normal 12px/24px "Microsoft yahei", Arial;
    /*padding-bottom:30px;*/
}

a
{
    color:#333;
    text-decoration:none;
}


a:hover{color:#093;text-decoration:none;}

#title
{
    width:300px;
    margin:3% auto 0;
}

#title h2
{
    font-size:18px;
}

#wrapper
{
    width:340px;
    height:inherit;
    /*
    大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
    是因为我们在#container中使用了以下属性：
    margin:0 auto;
    按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
    如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
    通过margin:auto我们就可以轻易地使层自动居中了。
    */
    /*margin:0 auto;*/
    background:#f8f8f8;
    border:1px solid #a3a3a3;
    /*
    padding 简写属性在一个声明中设置所有内边距属性。
    这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。
    行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，
    从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。
    注释：不允许使用负值。
    padding:10px 5px 15px 20px;
    •上内边距是 10px
    •右内边距是 5px
    •下内边距是 15px
    •左内边距是 20px
    */
    padding:0px 20px 50px 0px;       
    -moz-border-radius:5px;
}

#wrapper h3
{
    color:#333;
    font-size:14px;
    text-align:center;
    margin:20px 0;
}
    
/* box */
.box
{
    width:inherit;
    margin:0px auto 0;
    background:#fff;
    border:1px solid #d3d3d3;
}

.tab_menu
{
    overflow:hidden;
}

.tab_menu li
{
    width:80px;
    float:left;
    height:30px;    
    line-height:30px;
    color:#fff;
    background:#093;/*Green*/
    text-align:center;
    /*
    设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 
    cursor：[<url> [<x> <y>]?,]*[ auto | default | none | 
    context-menu | help | pointer | progress | wait | cell | 
    crosshair | text | vertical-text | alias | copy | move | 
    no-drop | not-allowed | e-resize | n-resize | ne-resize | 
    nw-resize | s-resize | se-resize | sw-resize | w-resize | 
    ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]
    */
    cursor:pointer;
}

.tab_menu li.current
{
    color:#333;
    background:#fff;
}

.tab_menu li a
{
    color:#fff;
    text-decoration:none;
}

.tab_menu li.current a
{
    color:#333;
}

.tab_box
{
    padding:20px;
    width: 316px;
}

.tab_box li
{
    height:24px;
    line-height:24px;
    overflow:hidden;
}

.tab_box li span
{
    margin:0 5px 0 0;
    font-family:"宋体";
    font-size:12px;
    font-weight:400;
    color:#ddd;
}

.tab_box .hide
{
    display:none;
}

/*************Rounded Rectangle*********************/

.raised
{
    background:transparent;
    width:100%;
    height:40px;
    margin-top:20px;
}

.raised h1,raised p
{
    margin:0 10px;
}

.raised h1
{
    font-size:2em;
    color:#fff;
}

.raised p
{
    padding-bottom:0.5em;
}

.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b
{
    display:block;
    overflow:hidden;
    font-size:1px;
}

.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b
{
    height:1px;
}

.raised .b2
{
    background:#DFDFDF;
    border-left:1px solid #fff;
    border-right:1px solid #eee;
}

.raised .b3
{
    background:#DFDFDF;
    border-left:1px solid #fff;
    border-right:1px solid #ddd;
}

.raised .b4
{
    background:#DFDFDF;
    border-left:1px solid #fff;
    border-right:1px solid #aaa;
}

.raised .b4b
{
    background:#DFDFDF;
    border-left:1px solid #eee;
    border-right:1px solid #999;
}

.raised .b3b
{
    background:#DFDFDF;
    border-left:1px solid #ddd;
    border-right:1px solid #999;
}

.raised .b2b
{
    background:#DFDFDF;
    border-left:1px solid #aaa;
    border-right:1px solid #999;
}

/*margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px*/
.raised .b1
{
    margin:0 5px;
    background:#DFDFDF;
}

.raised .b2, .raised .b2b
{
    margin:0 3px;
    border-width:0 2px;
}

.raised .b3, .raised .b3b
{
    margin:0 2px;
}

.raised .b4, .raised .b4b
{
    height:2px; 
    margin:0 1px;
}

.raised .b1b
{
    margin:0 5px;
    background:#DFDFDF;
}

.raised .boxcontent
{
    display:block;
    background:#DFDFDF;
    border-left:1px solid #fff;
    border-right:1px solid #999;
    height:30px;
}


#docMore
{
    margin-top:40px;
    background-color:Green;
}


/************************Side Bar********************************/

#arrowBox
{    
    float:left;    
    width:20px;
    height:860px;
}


#pageBody .sideBarButton
{
    float:left;
    width:15px;
    height:40px;
    background:url(../../EcaResource/Image/MainPage/sideBarButton.gif) no-repeat;
    margin-top:400px;
    background-color:Orange;
}

#sideBar.side-collapsed
{
    padding-left:20px;
}

#sideBar .sideBarButton-over
{
}

#sideBar .sideBarButton
{
    float:left;
}






